<!-- knowledge-detail.html -->
<div class="knowledge-management">
    <div class="page-title">
        <span>知识库 - 2023年度政府公文</span>
        <button id="toggle-view"><i class="fas fa-th-list"></i> 切换视图</button>
    </div>

    <div class="knowledge-container">
        <!-- 左侧树状目录 -->
        <div class="tree-panel">
            <div class="tree-node expanded">
                <div class="tree-node-content">
                    <i class="fas fa-folder tree-node-icon"></i>
                    <span>2023年度</span>
                </div>
                <div class="tree-node-children">
                    <div class="tree-node expanded">
                        <div class="tree-node-content">
                            <i class="fas fa-folder tree-node-icon"></i>
                            <span>市政府文件</span>
                        </div>
                        <div class="tree-node-children">
                            <div class="tree-node">
                                <div class="tree-node-content">
                                    <i class="fas fa-folder tree-node-icon"></i>
                                    <span>通知</span>
                                </div>
                            </div>
                            <div class="tree-node">
                                <div class="tree-node-content">
                                    <i class="fas fa-folder tree-node-icon"></i>
                                    <span>决定</span>
                                </div>
                            </div>
                            <div class="tree-node expanded active">
                                <div class="tree-node-content">
                                    <i class="fas fa-folder tree-node-icon"></i>
                                    <span>会议纪要</span>
                                </div>
                                <div class="tree-node-children">
                                    <div class="tree-node">
                                        <div class="tree-node-content">
                                            <i class="fas fa-file-alt tree-node-icon"></i>
                                            <span>第一季度工作会议</span>
                                        </div>
                                    </div>
                                    <div class="tree-node">
                                        <div class="tree-node-content">
                                            <i class="fas fa-file-alt tree-node-icon"></i>
                                            <span>疫情防控专题会议</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tree-node">
                        <div class="tree-node-content">
                            <i class="fas fa-folder tree-node-icon"></i>
                            <span>各部门文件</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧文件列表 -->
        <div class="file-panel">
            <div class="file-toolbar">
                <div class="breadcrumb">
                    <span class="breadcrumb-item">2023年度</span>
                    <span class="breadcrumb-separator">/</span>
                    <span class="breadcrumb-item">市政府文件</span>
                    <span class="breadcrumb-separator">/</span>
                    <span class="breadcrumb-item">会议纪要</span>
                </div>
                <div class="file-actions">
                    <button id="upload-btn"><i class="fas fa-upload"></i> 上传文件</button>
                    <button id="new-folder-btn"><i class="fas fa-folder-plus"></i> 新建文件夹</button>
                </div>
            </div>

            <table class="file-list">
                <thead>
                <tr>
                    <th width="40%">文件名</th>
                    <th width="20%">修改日期</th>
                    <th width="15%">大小</th>
                    <th width="25%">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <i class="fas fa-file-word file-icon" style="color: #2b579a;"></i>
                        <span>2023年第一季度工作会议纪要.docx</span>
                    </td>
                    <td>2023-03-15</td>
                    <td>2.4 MB</td>
                    <td>
                        <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                        <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                        <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <i class="fas fa-file-pdf file-icon" style="color: #d94a3d;"></i>
                        <span>疫情防控专题会议纪要.pdf</span>
                    </td>
                    <td>2023-02-28</td>
                    <td>5.1 MB</td>
                    <td>
                        <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                        <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                        <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <i class="fas fa-file-excel file-icon" style="color: #217346;"></i>
                        <span>第一季度工作会议参会人员名单.xlsx</span>
                    </td>
                    <td>2023-03-10</td>
                    <td>1.2 MB</td>
                    <td>
                        <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                        <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                        <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <i class="fas fa-file-image file-icon" style="color: #e74c3c;"></i>
                        <span>会议现场照片.jpg</span>
                    </td>
                    <td>2023-03-15</td>
                    <td>3.7 MB</td>
                    <td>
                        <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                        <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                        <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <i class="fas fa-file-audio file-icon" style="color: #9b59b6;"></i>
                        <span>领导讲话录音.mp3</span>
                    </td>
                    <td>2023-03-15</td>
                    <td>15.2 MB</td>
                    <td>
                        <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                        <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                        <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                    </td>
                </tr>
                </tbody>
            </table>

            <!-- 分页控制 -->
            <div class="pagination">
                <span class="page-info">显示 1-5 条，共 12 条</span>
                <div class="page-controls">
                    <button class="page-btn" disabled><i class="fas fa-angle-left"></i> </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <button class="page-btn"><i class="fas fa-angle-right"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* 知识库特有样式 */
    .knowledge-management {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .knowledge-container {
        display: flex;
        height: calc(100% - 60px);
        flex: 1;
    }

    .tree-panel {
        width: 280px;
        background-color: #fff;
        border-radius: 4px;
        padding: 15px;
        margin-right: 20px;
        overflow-y: auto;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .tree-node {
        padding: 8px 0;
        cursor: pointer;
    }

    .tree-node-content {
        display: flex;
        align-items: center;
        padding: 5px 0;
        border-radius: 4px;
    }

    .tree-node-content:hover {
        background-color: #f5f5f5;
    }

    .tree-node-content.active {
        background-color: #e6f0ff;
        color: #1a5fb4;
    }

    .tree-node-icon {
        margin-right: 8px;
        color: #666;
    }

    .tree-node-children {
        padding-left: 20px;
        display: none;
    }

    .tree-node.expanded .tree-node-children {
        display: block;
    }

    .file-panel {
        flex: 1;
        background-color: #fff;
        border-radius: 4px;
        padding: 15px;
        overflow-y: auto;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
    }

    .file-toolbar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .breadcrumb {
        display: flex;
        align-items: center;
    }

    .breadcrumb-item {
        color: #666;
        cursor: pointer;
    }

    .breadcrumb-item:hover {
        color: #1a5fb4;
    }

    .breadcrumb-separator {
        margin: 0 8px;
        color: #999;
    }

    .file-actions button {
        margin-left: 10px;
        padding: 6px 12px;
        background-color: #1a5fb4;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }

    .file-actions button:hover {
        background-color: #0d47a1;
    }

    .file-list {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }

    .file-list th {
        text-align: left;
        padding: 10px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
        font-weight: 500;
    }

    .file-list td {
        padding: 12px 10px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
    }

    .file-list tr:hover td {
        background-color: #f9f9f9;
    }

    .file-icon {
        margin-right: 8px;
        font-size: 18px;
    }

    .file-action {
        color: #1a5fb4;
        margin-right: 15px;
        cursor: pointer;
        white-space: nowrap;
    }

    .file-action i {
        margin-right: 5px;
    }

    .pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        padding-top: 15px;
        border-top: 1px solid #eee;
    }

    .page-info {
        color: #666;
        font-size: 14px;
    }

    .page-controls {
        display: flex;
        align-items: center;
    }

    .page-btn {
        padding: 6px 12px;
        margin-left: 8px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        min-width: 36px;
    }

    .page-btn:hover {
        background-color: #f5f5f5;
    }

    .page-btn.active {
        background-color: #1a5fb4;
        color: white;
        border-color: #1a5fb4;
    }

    .page-btn:disabled {
        color: #ccc;
        cursor: not-allowed;
    }
</style>

<!-- 前面的HTML和CSS部分保持不变 -->

<script>
    // 知识库页面专有脚本
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化树形菜单交互
        initTreeMenu();

        // 初始化文件操作功能
        initFileOperations();

        // 初始化分页功能
        initPagination();

        // 初始化视图切换功能
        initViewToggle();
    });

    // 树形菜单交互
    function initTreeMenu() {
        // 树节点点击事件
        const treeNodes = document.querySelectorAll('.tree-node-content');
        treeNodes.forEach(node => {
            node.addEventListener('click', function(e) {
                e.stopPropagation();

                // 移除所有active类
                treeNodes.forEach(n => n.classList.remove('active'));

                // 添加active类到当前节点
                this.classList.add('active');

                // 切换展开/折叠
                const parentNode = this.parentElement;
                if (parentNode.querySelector('.tree-node-children')) {
                    parentNode.classList.toggle('expanded');
                }

                // 更新面包屑导航
                updateBreadcrumb(this);

                // 模拟加载对应目录的文件
                loadFilesForFolder(this);
            });
        });
    }

    // 更新面包屑导航
    function updateBreadcrumb(node) {
        const breadcrumb = document.querySelector('.breadcrumb');
        const path = [];

        // 向上遍历获取完整路径
        let current = node;
        while (current) {
            const text = current.querySelector('span')?.textContent;
            if (text) path.unshift(text);
            current = current.closest('.tree-node-children')?.previousElementSibling;
        }

        // 生成面包屑HTML
        let html = '';
        path.forEach((item, index) => {
            html += `<span class="breadcrumb-item">${item}</span>`;
            if (index < path.length - 1) {
                html += `<span class="breadcrumb-separator">/</span>`;
            }
        });

        breadcrumb.innerHTML = html;
    }

    // 加载文件夹内容
    function loadFilesForFolder(node) {
        const filePanel = document.querySelector('.file-panel');
        const loadingHTML = `
            <div style="display:flex; justify-content:center; align-items:center; height:200px;">
                <div class="spinner"></div>
            </div>
        `;

        // 显示加载状态
        const fileList = filePanel.querySelector('table');
        const originalContent = fileList.outerHTML;
        fileList.outerHTML = loadingHTML;

        // 模拟异步加载
        setTimeout(() => {
            const folderName = node.querySelector('span').textContent;

            // 这里应该是实际从服务器获取数据的AJAX请求
            // 以下是模拟数据
            const mockFiles = {
                '2023年度': getAnnualFiles(),
                '市政府文件': getGovernmentFiles(),
                '会议纪要': getMeetingFiles(),
                '默认': getDefaultFiles()
            };

            const files = mockFiles[folderName] || mockFiles['默认'];

            // 重新渲染文件列表
            renderFileList(files);
        }, 800);
    }

    // 文件操作功能
    function initFileOperations() {
        // 上传文件
        document.getElementById('upload-btn')?.addEventListener('click', function() {
            const input = document.createElement('input');
            input.type = 'file';
            input.multiple = true;
            input.accept = '.doc,.docx,.pdf,.xls,.xlsx,.jpg,.png,.mp3,.mp4';

            input.onchange = function(e) {
                const files = e.target.files;
                if (files.length > 0) {
                    showUploadDialog(files);
                }
            };

            input.click();
        });

        // 新建文件夹
        document.getElementById('new-folder-btn')?.addEventListener('click', function() {
            const folderName = prompt('请输入新文件夹名称:');
            if (folderName && folderName.trim()) {
                createNewFolder(folderName);
            }
        });

        // 文件操作按钮事件委托
        document.querySelector('.file-list')?.addEventListener('click', function(e) {
            const actionBtn = e.target.closest('.file-action');
            if (!actionBtn) return;

            const fileRow = actionBtn.closest('tr');
            const fileName = fileRow.querySelector('td:first-child span').textContent;
            const action = actionBtn.querySelector('i').className.split(' ')[1];

            switch(action) {
                case 'fa-eye':
                    previewFile(fileName);
                    break;
                case 'fa-download':
                    downloadFile(fileName);
                    break;
                case 'fa-share-alt':
                    shareFile(fileName);
                    break;
                case 'fa-trash-alt':
                    deleteFile(fileName, fileRow);
                    break;
            }
        });
    }

    // 分页功能
    function initPagination() {
        const pageBtns = document.querySelectorAll('.page-btn');
        pageBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (this.disabled) return;

                // 处理上一页/下一页
                if (this.querySelector('.fa-angle-left')) {
                    navigatePage(-1);
                } else if (this.querySelector('.fa-angle-right')) {
                    navigatePage(1);
                } else {
                    // 数字页码
                    const pageNum = parseInt(this.textContent);
                    goToPage(pageNum);
                }
            });
        });
    }

    // 视图切换功能
    function initViewToggle() {
        document.getElementById('toggle-view')?.addEventListener('click', function() {
            const fileList = document.querySelector('.file-list');
            const icon = this.querySelector('i');

            if (fileList.classList.contains('grid-view')) {
                // 切换回列表视图
                fileList.classList.remove('grid-view');
                icon.classList.replace('fa-th-large', 'fa-th-list');
                this.innerHTML = '<i class="fas fa-th-list"></i> 列表视图';
            } else {
                // 切换到网格视图
                fileList.classList.add('grid-view');
                icon.classList.replace('fa-th-list', 'fa-th-large');
                this.innerHTML = '<i class="fas fa-th-large"></i> 网格视图';
            }
        });
    }

    // 辅助函数：渲染文件列表
    function renderFileList(files) {
        const fileList = document.querySelector('.file-list');
        if (!fileList) return;

        let html = `
            <thead>
                <tr>
                    <th width="40%">文件名</th>
                    <th width="20%">修改日期</th>
                    <th width="15%">大小</th>
                    <th width="25%">操作</th>
                </tr>
            </thead>
            <tbody>
        `;

        files.forEach(file => {
            const iconClass = getFileIconClass(file.type);
            const size = formatFileSize(file.size);

            html += `
                <tr>
                    <td>
                        <i class="fas ${iconClass} file-icon"></i>
                        <span>${file.name}</span>
                    </td>
                    <td>${file.modified}</td>
                    <td>${size}</td>
                    <td>
                        <span class="file-action"><i class="fas fa-eye"></i> 预览</span>
                        <span class="file-action"><i class="fas fa-download"></i> 下载</span>
                        <span class="file-action"><i class="fas fa-share-alt"></i> 分享</span>
                        <span class="file-action"><i class="fas fa-trash-alt"></i> 删除</span>
                    </td>
                </tr>
            `;
        });

        html += `</tbody>`;
        fileList.innerHTML = html;
    }

    // 辅助函数：获取文件图标类
    function getFileIconClass(fileType) {
        const iconMap = {
            'doc': 'fa-file-word',
            'docx': 'fa-file-word',
            'pdf': 'fa-file-pdf',
            'xls': 'fa-file-excel',
            'xlsx': 'fa-file-excel',
            'jpg': 'fa-file-image',
            'png': 'fa-file-image',
            'mp3': 'fa-file-audio',
            'mp4': 'fa-file-video',
            'default': 'fa-file-alt'
        };

        return iconMap[fileType.toLowerCase()] || iconMap['default'];
    }

    // 辅助函数：格式化文件大小
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 模拟数据函数
    function getAnnualFiles() {
        return [
            { name: '2023年度工作总结.docx', type: 'docx', size: 2457600, modified: '2023-12-31' },
            { name: '2023年度预算报告.pdf', type: 'pdf', size: 3560000, modified: '2023-12-15' },
            { name: '年度考核结果.xlsx', type: 'xlsx', size: 987000, modified: '2023-12-20' }
        ];
    }

    function getGovernmentFiles() {
        return [
            { name: '市政府工作报告.docx', type: 'docx', size: 3250000, modified: '2023-06-30' },
            { name: '城市规划调整方案.pdf', type: 'pdf', size: 4780000, modified: '2023-08-15' },
            { name: '政府人事任免通知.docx', type: 'docx', size: 1250000, modified: '2023-09-10' }
        ];
    }

    function getMeetingFiles() {
        return [
            { name: '第一季度工作会议纪要.docx', type: 'docx', size: 2457600, modified: '2023-03-15' },
            { name: '疫情防控专题会议纪要.pdf', type: 'pdf', size: 5120000, modified: '2023-02-28' },
            { name: '参会人员名单.xlsx', type: 'xlsx', size: 1250000, modified: '2023-03-10' },
            { name: '会议现场照片.jpg', type: 'jpg', size: 3870000, modified: '2023-03-15' },
            { name: '领导讲话录音.mp3', type: 'mp3', size: 15200000, modified: '2023-03-15' }
        ];
    }

    function getDefaultFiles() {
        return [
            { name: '示例文档.docx', type: 'docx', size: 1450000, modified: '2023-01-15' },
            { name: '示例表格.xlsx', type: 'xlsx', size: 850000, modified: '2023-01-15' }
        ];
    }

    // 文件操作具体实现
    function showUploadDialog(files) {
        const fileNames = Array.from(files).map(f => f.name).join('<br>');
        const confirmUpload = confirm(`您选择了 ${files.length} 个文件:\n\n${fileNames}\n\n确认上传吗？`);

        if (confirmUpload) {
            // 这里应该是实际上传逻辑
            alert('文件上传中...');

            // 模拟上传成功
            setTimeout(() => {
                alert('文件上传成功！');
                // 刷新文件列表
                loadFilesForFolder(document.querySelector('.tree-node-content.active'));
            }, 1500);
        }
    }

    function createNewFolder(name) {
        // 这里应该是实际创建文件夹的AJAX请求
        alert(`新建文件夹: ${name}`);

        // 模拟创建成功
        setTimeout(() => {
            const activeNode = document.querySelector('.tree-node-content.active');
            if (activeNode) {
                const childrenContainer = activeNode.parentElement.querySelector('.tree-node-children');
                if (childrenContainer) {
                    const newNode = document.createElement('div');
                    newNode.className = 'tree-node';
                    newNode.innerHTML = `
                        <div class="tree-node-content">
                            <i class="fas fa-folder tree-node-icon"></i>
                            <span>${name}</span>
                        </div>
                    `;
                    childrenContainer.appendChild(newNode);
                }
            }
        }, 500);
    }

    function previewFile(name) {
        alert(`预览文件: ${name}\n\n(实际项目中这里会打开文件预览窗口)`);
    }

    function downloadFile(name) {
        alert(`下载文件: ${name}\n\n(实际项目中会触发文件下载)`);
    }

    function shareFile(name) {
        const email = prompt(`请输入要分享的邮箱地址 (${name}):`);
        if (email) {
            alert(`已将文件 ${name} 分享至 ${email}`);
        }
    }

    function deleteFile(name, row) {
        if (confirm(`确定要删除文件 "${name}" 吗？`)) {
            // 这里应该是实际删除文件的AJAX请求
            row.style.opacity = '0.5';

            // 模拟删除成功
            setTimeout(() => {
                row.remove();
                alert(`文件 ${name} 已删除`);
            }, 800);
        }
    }

    // 分页操作
    function navigatePage(direction) {
        const currentPage = parseInt(document.querySelector('.page-btn.active')?.textContent || '1');
        goToPage(currentPage + direction);
    }

    function goToPage(pageNum) {
        if (pageNum < 1) return;

        // 这里应该是实际的分页AJAX请求
        alert(`加载第 ${pageNum} 页数据`);

        // 模拟分页加载
        setTimeout(() => {
            const pageBtns = document.querySelectorAll('.page-btn');
            pageBtns.forEach(btn => {
                btn.classList.remove('active');
                btn.disabled = false;

                if (parseInt(btn.textContent) === pageNum) {
                    btn.classList.add('active');
                }

                // 禁用上一页/下一页按钮
                if (pageNum === 1 && btn.querySelector('.fa-angle-left')) {
                    btn.disabled = true;
                }
            });
        }, 800);
    }
</script>
